<template>
  <div ref="container" class="container" style="position: relative">
    <div ref="minder" class="mind-editor" :style="minderStyle" />
    <div>
      <toolbar v-if="showToolbar" ref="toolbar" />
      <hotbox v-if="undefined !== menus" :menus="menus" :minder="this.minder" />
      <navbar v-if="showNavbar" ref="navbar" :minder="this.minder" />
    </div>
  </div>
</template>

<script>
import Hotbox from './hotbox.vue'
import Navbar from './navbar.vue'
import Toolbar from './toolbar'
import { handlePasteNode } from '@/utils/paste'
export default {
  name: 'MinderTree',
  components: { Toolbar, Hotbox, Navbar },
  provide() {
    return {
      minder: this
    }
  },
  props: {
    // 脑图数据
    data: {
      type: Object,
      default: undefined
    },
    // 聚焦节点
    focusParams: {
      type: Object,
      default: undefined
    },
    // 菜单
    menus: {
      type: Array,
      default: undefined
    },
    // 显示navbar
    showNavbar: {
      type: Boolean,
      default: true
    },
    // 显示toolbar
    showToolbar: {
      type: Boolean,
      default: true
    },
    // 高度
    height: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      minder: null,
      minderSearch: {
        keyword: undefined,
        lastKeyword: undefined,
        curIndex: 0,
        resultNum: 0
      },
      sourceNode: Object
    }
  },
  computed: {
    minderStyle() {
      let styles
      if (this.height) {
        styles = { height: `${this.height}px` }
      } else {
        styles = {
          // Header 64 tabs 44 bottom 24
          height: (document.body.clientHeight - 50 - 36) + 'px'
        }
      }
      return styles
    }
  },
  watch: {
    data: function() {
      this.importJson()
    }
  },
  mounted() {
    this.initMinder()
    this.initMinderEvent()
  },
  methods: {
    // 初始化Minder
    initMinder() {
      if (this.minder) return
      const el = this.$refs.minder
      this.minder = new kityminder.Minder({
        x: 200,
        renderTo: el
      })
      this.importJson()
      this.$emit('init-success', this.minder)
    },
    // 初始化事件
    initMinderEvent() {
      // 注册内置事件
      this.minder._initKeyReceiver()

      // 节点展开事件
      this.minder.on('expandNodeEvent', () => {
        this.$emit('expand-node-event', this.minder.getSelectedNode())
      })
      // 复制粘贴事件
      this.$refs.minder.addEventListener('keydown', (e) => {
        if (e.ctrlKey && e.keyCode === 67) {
          if (this.minder.getSelectedNode()) {
            this.sourceNode = this.minder.getSelectedNode()
          }
        }
        if (e.ctrlKey && e.keyCode === 86) {
          if (this.minder.getSelectedNode()) {
            const targetNode = this.minder.getSelectedNode()
            this.$emit('paste-node-event', this.sourceNode, targetNode)
          }
        }
      })
    },
    // 获取minder对象
    getMinder() {
      return this.minder
    },
    // 导入
    importJson() {
      if (this.data) {
        this.minder.importJson({
          theme: 'fmea-blue',
          template: 'fmea',
          root: this.data
        })
        // 设置聚焦
        if (this.focusParams && this.focusParams.extraId && this.focusParams.nodeType) {
          this.setFocus(this.focusParams.extraId, this.focusParams.nodeType)
        }
      }
    },
    // 设置聚焦
    setFocus(id, nodeType) {
      if (id && nodeType) {
        this.minder.execCommand('SetFocusNode', id, nodeType)
      } else {
        this.minder.execCommand('SetFocusNode')
      }
    }
    // handleClick() {
    //   this.$refs.toolbar.setFilterBlur()
    // }
  }
}
</script>
